<template>
  <div class="container">
    <Pagetools>
      <!-- 表格 -->
      <template #table>
        <div class="tag">
          <i class="el-alert__icon el-icon-info"></i>
          数据一共 {{ total }} 条
        </div>
        <el-table :data="tableData" style="width: 100%; margin: 20px 0">
          <el-table-column prop="number" label="试题编号"> </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column label="提型">
            <template v-slot="{ row }">
              {{ questionType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="题干" width="180">
          </el-table-column>
          <el-table-column label="录入时间">
            <template v-slot="{ row }">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template v-slot="{ row }">
              {{ difficulty(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                style="
                  color: blue;
                  border-color: #b6daff;
                  background-color: #ecf5ff;
                "
                icon="el-icon-view"
                circle
                @click="handlePre(scope.row)"
              ></el-button>
              <el-button
                style="
                  color: #67c23a;
                  border-color: #67c23a;
                  background-color: #f0f9eb;
                "
                size="small"
                icon="el-icon-edit"
                circle
                @click="
                  $router.push({ path: 'new', query: { id: scope.row.id } })
                "
              ></el-button>
              <el-button
                style="
                  color: #f69c9b;
                  border-color: #f69c9b;
                  background-color: #fef0f0;
                "
                icon="el-icon-delete"
                circle
                size="small"
                @click="handleDelete(scope.row)"
              ></el-button>
              <el-button
                style="
                  color: #e6a23c;
                  border-color: #e6a23c;
                  background-color: #fdf6ec;
                "
                icon="el-icon-check"
                circle
                size="small"
                @click="handleSel(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <template #page>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="q.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="q.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          style="float: right; margin-bottom: 20px"
        >
        </el-pagination>
      </template>
    </Pagetools>
    <!-- 试题预览 dialog -->
    <el-dialog :visible.sync="showDialog" title="题目预览">
      <questionsBaseDia v-if="showDialog" :row="row" ref="questionsDia" />
    </el-dialog>
  </div>
</template>

<script>
import Pagetools from '../components/Pagetools'
import {
  list as questionsList,
  remove,
  choiceAdd,
  detail
} from '@/api/hmmm/questions'
import { formatDate } from '@/utils'
import questionsBaseDia from './questionsBaseDia.vue'

export default {
  name: 'questions',
  components: {
    Pagetools,
    questionsBaseDia
  },
  data () {
    return {
      tableData: [],
      total: null,
      q: {
        page: 1,
        pagesize: 5
      },
      showDialog: false,
      row: {}
    }
  },
  created () {
    this.loadquesList()
  },
  methods: {
    // 获取试题列表
    async loadquesList () {
      const res = await questionsList(this.q)
      // console.log(res, 333)
      if (res.status !== 200) return
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 试题预览
    handlePre (row) {
      // console.log(row)
      this.showDialog = true
      // this.row = row
      this.loadDetail(row)
    },
    // 加入精选
    async handleSel (row) {
      const res = await this.$confirm('是否将该题目加入精选?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((e) => e)
      if (res === 'confirm') {
        // console.log(row)
        const result = await choiceAdd({ id: row.id, choiceState: 1 })
        // console.log(result)
        if (result.status !== 200) return
        if (this.q.page > 1 && this.tableData.length === 1) {
          this.q.page--
        }
        this.$message.success('添加到精选成功')
        // 删除成功后重新刷新列表
        this.loadquesList()
      }
    },
    // 删除试题
    async handleDelete (row) {
      // console.log(row)
      const res = await this.$confirm('是否删除该试题?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((e) => e)
      // console.log(res)
      if (res === 'confirm') {
        // console.log(row)
        const result = await remove(row)
        // console.log(result)
        if (result.status !== 200) return
        if (this.q.page > 1 && this.tableData.length === 1) {
          this.q.page--
        }
        this.$message.success('删除成功')
        // 删除成功后重新刷新列表
        this.loadquesList()
      }
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.q.pagesize = val
      this.loadquesList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.q.page = val
      this.loadquesList()
    },
    // 格式化提型
    questionType (data) {
      if (data === '1') {
        return '单选'
      } else if (data === '2') {
        return '多选'
      } else if (data === '3') {
        return '简答'
      }
    },
    // 格式化时间
    formatDate,
    // 格式化难度
    difficulty (data) {
      if (data === '1') {
        return '简单'
      } else if (data === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    async loadDetail (row) {
      // console.log(row, 33)
      const res = await detail(row)
      // console.log(res, 33)
      this.row = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px 8px;

  .tag {
    padding-left: 12px;
    height: 40px;
    line-height: 40px;
    background-color: #f4f4f5;
    color: #909399;
    font-size: 14px;
  }
}
</style>
